<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
			.a{
				width: 400px;
				height:450px;
				background-color: pink;
				border:1px red solid ;
			}
			.s{
				width: 500px;
				height: 1500px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 元素显示模式：
		 1.块元素 block
		 比较霸道，单独占一行
		 默认情况下宽度和父级元素一样宽
		 可以给元素设置宽,高,水平居中
		 块元素中可以包含行内元素和块元素
		 常见块元素 
		   div p ol ul h1~h6
		 2.行内元素 inline
		  一行显示多个
		  默认宽度由内容填充，内容多宽元素多宽
		  宽，高 水平居中属性设置不上，不适用
		  常见 行内元素
		   a span del strong em
		   3. 行内块元素 inline-block
		    一行显示多个
			默认宽度由内容填充，内容多宽元素多宽
			可以设置 宽，高
			input  img td(数据单元格)
			元素模式的转换
			 display: 转换后的显示模式
			 diapiay: block 
			 text-decoration: onne; 去掉a标签下的下划线
			
		   
		  -->
		<div class='a'>
			<img src="img/耳机.webp" alt="耳机" />
			<h3>hello</h3>
			<span class="s">2399</span>
			<span>3999</span>
			<a href="#" >链接</a>
		</div>
	</body>
</html>
